<template>
  <div class="service-detail">
    <el-card v-if="service">
      <h2>{{ service.name }}</h2>
      <p>{{ service.description }}</p>
      <p>价格：{{ service.price }} 元</p>
      <el-divider/>
      <OrderForm :serviceId="service.id" @order-success="handleOrderSuccess"/>
      <el-divider/>
      <ReviewList :serviceId="service.id" ref="reviewListRef"/>
      <ReviewForm :serviceId="service.id" @review-success="refreshReviews"/>
    </el-card>
    <el-empty v-else description="未找到服务"/>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { getServiceDetail } from '@/api/service'
import OrderForm from './components/OrderForm.vue'
import ReviewList from './components/ReviewList.vue'
import ReviewForm from './components/ReviewForm.vue'

const route = useRoute()
const service = ref(null)
const reviewListRef = ref(null)

onMounted(async () => {
  const res = await getServiceDetail(route.params.id)
  service.value = res.data
})

function handleOrderSuccess(orderId) {

}
function refreshReviews() {
  reviewListRef.value && reviewListRef.value.fetchReviews()
}
</script> 